<!--
	作者：956911785@qq.com
	时间：2019年11月16日23:11:53
	描述：诗词语音
-->

<template>
	<Modal :title="title" v-model="modal0" width="1000px">
		<Form ref="params" :model="params" :rules="ruleValidate" :label-width="120" label-position="left">
			<div style="width:100%;height:600px; overflow-y: scroll;">

				<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="pname" label="诗词名称">
				        	<Input v-model="params.pname" placeholder="请输入诗词名称" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="author" label="作者姓名">
				        	<Input v-model="params.author" placeholder="请输入作者姓名" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		      	</div>

		      	<div style="width:100%;height: 60px;line-height: 60px;float:left;">
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem  prop="nj" label="任务年级">
				        	<Input v-model="params.nj" placeholder="请输入任务年级" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		        	<div style="width: 50%;text-align: left;float: left;" align="left">
				        <FormItem label="任务班级">
				        	<Input v-model="params.bj" placeholder="请输入任务班级" clearable style="width: 90%"></Input>
		        		</FormItem>
		        	</div>
		      	</div>
		      	
		      	<div style="width:100%;height: auto;float:left;">
					<div style="width: 50%;text-align: left;float: left;" align="left">
					    <FormItem prop="pcontent" label="诗词内容">
							
							<div ref="editor" style="text-align:left">
							</div>
						</FormItem>
					</div>
					<div style="width: 50%;float:left;">
						<div style="float:left;">
							<FormItem label="诗词封面">
								<Upload
									ref="upload"
									:show-upload-list="false"
									:on-success="handleSuccess2"
									:format="['jpg','jpeg','png']"
									:max-size="2048"
									:on-format-error="handleFormatError"
									:on-exceeded-size="handleMaxSize"
									type="drag"
									:action="action1"
									style="display: inline-block;width:80px;">
									<div style="width: 80px;height:80px;line-height: 80px;">
										<Icon type="ios-camera" size="20"></Icon>
									</div>
								</Upload>
							</FormItem>
						</div>
						
						<div style="float:left;width:120px;float:left;margin-left: 10px; ">
							<template v-if="params.fm">
								<img :src="xt+params.fm"  style="width:120px;height: auto;float:left;">
								<div style="width:120px;float:left;text-align: center;">
									<Icon type="ios-eye-outline" style="font-size:16px;" @click.native="handleView2()"></Icon>
									<Icon type="ios-trash-outline" style="font-size:16px;padding-left:10px;" @click.native="handleRemove2()"></Icon>
								</div>
							</template>
						</div>
					</div>  
			    </div>
				
				<div style="width:100%;height: auto;float:left;padding-top:10px;">
					<div style="float:left;">
						<FormItem label="诗词内容图片">
							<Upload
								ref="upload"
								:show-upload-list="false"
								:on-success="handleSuccess1"
								:format="['jpg','jpeg','png']"
								:max-size="2048"
								:on-format-error="handleFormatError"
								:on-exceeded-size="handleMaxSize"
								type="drag"
								:action="action1"
								style="display: inline-block;width:80px;">
								<div style="width: 80px;height:80px;line-height: 80px;">
									<Icon type="ios-camera" size="20"></Icon>
								</div>
							</Upload>
						</FormItem>
					</div>
					 
					<template v-for="(sc, index) in params.listsc">
						<template v-if="sc">
							<div style="float:left;width:120px;float:left;margin-left: 10px; ">
								<img :src="xt+sc.PICURL"  style="width:120px;height: auto;float:left;">
								<div style="width:120px;float:left;text-align: center;">
									<Icon type="ios-eye-outline" style="font-size:16px;" @click.native="handleView1(index)"></Icon>
									<Icon type="ios-trash-outline" style="font-size:16px;" @click.native="handleRemove1(index)"></Icon>
								</div>
							</div>
						</template>
					</template>
				</div>
				

				<div style="width:100%;height: auto;float:left;padding-top:10px;">
					<div style="float:left;">
						<FormItem label="诗词语音">
							<div class="scyy_upload" v-on:click="openaddscyy()">
								<Icon type="md-mic" size="20"></Icon>
							</div>
						</FormItem>
					</div>
					 
					<template v-for="(yy, index) in params.listyy">
						<div style="float:left;width:80px;margin-left:10px;border:1px dashed #2d8cf0;">
							<div style="float:left;width:80px;height:60px;text-align: center;line-height: 60px;">
								<Icon type="md-microphone" size="20"></Icon>
							</div>
							<div style="width:80px;float:left;text-align: center;">
								{{yy.MC}}
							</div>
							<div style="width:80px;float:left;text-align: center;">
								<Icon type="ios-trash-outline" style="font-size:16px;" @click.native="handleRemove3(index)"></Icon>
							</div>
						</div>
					</template>
					
				</div> 
				
		      	<Modal title="图片预览" v-model="visible">
		      	    <img :src="xt+imgurl" v-if="visible" style="width: 100%">
		      	</Modal>
				
		   </div> 
	    </Form>
	   	<div slot="footer">
	    	<Button type="text"  @click="closeModal()">取消</Button>
	    	<Button type="primary" @click="addsave()" >确定</Button>
	    </div>
		<addscyy ref="addscyy" v-on:scyysave="scyysave"></addscyy>
    </Modal>
</template>

<script>
	import E from 'wangeditor'
	import addscyy from "./uploadyy";
	const _config = require('./../../../../config/config')
	export default {
		name:"tconent",
		props: {
    		teas:{
    			type:Object,	
    			default: function() {
					return null
				}
    		},
    		title:{
    			type:String,	
    		},
    	}, 
		data() {
			//长度控制
			const lenPass = (rule, str, callback) => {
			  if(str.length>rule.length){
			  	 callback(new Error('字符串长度在1-'+rule.length+'之间！'));
			  }
			  return callback();
			};
			//正整数控制
			const zzsPass1 = (rule, value, callback) => {
			    let reg = /^\+?[1-9][0-9]*$/; 
				if(!reg.test(value)){
				    callback(new Error('请输入正整数！'));
				}else{
				  	return callback();
				}
			};
			return {
				ruleValidate: {
		            pname: [
		                {required: true, message: '请输入诗词名称！', trigger: 'blur'},
		                {length:30,validator:lenPass,trigger:'blur'}
		            ],
					author: [
					  {required: true, message: '请输入诗词作者！', trigger: 'blur'},
					  {length:50,validator:lenPass,trigger:'blur'}
					],
		            nj:[
		                {required: true, message: '请输入任务年级！', trigger: 'blur'},
		                {validator:zzsPass1,trigger:'blur'}
		            ],
		        },   
                modal0:false,
                params:{
                	readid:'', 
                	pname:'', 
                	author:'', 
                	nj:'', 
                	bj:'', 
                	pcontent:'', 
                	fm:'', 
                	listsc:[],//诗词内容
                	listyy:[],//诗词相关语音
                },
				action1:_config._ADMIN_SERVER+'/readbook/upload/filesUploadSCfm.html',
				xt:_config._ADMIN_SERVER+'/readbook/',
				visible:false,
				imgurl:'',//需要展示得图片
				pcontent:'',
				editor: null,
			}
		},
		methods: {
			addsave:function(){
				if(this.pcontent!=""){
					this.params.pcontent=this.pcontent;
				}
				var pcontent=this.params.pcontent;
				var listsc=this.params.listsc;
				if(pcontent=="" && listsc.length<=0){
					this.$Modal.success({
					    title: "提示",
					    content: "请填写诗词内容或上传诗词内容图片！"
					});
					return;
				}
				var listyy=this.params.listyy;
				if(listyy.length<=0){
					this.$Modal.success({
					    title: "提示",
					    content: "请上传诗词语音！"
					});
					return;
				}
				this.$refs.params.validate((valid) => {
					if (valid){
						const params={...this.params};
						this.$emit("addsave",params);
                    }
                })
	        }, 
			
            closeModal(){
	      	    this.modal0 = false;
	      	    this.resetpar();
	        },
	        resetpar(){
	        	this.params={
	        		readid:'', 
	        		pname:'', 
	        		author:'', 
	        		nj:'', 
	        		bj:'', 
	        		pcontent:'', 
	        		fm:'', 
	        		listsc:[],//诗词内容
	        		listyy:[],//诗词相关语音
				};
	        },



			///<!------------------------诗词内容图片start------------------>
			//上传成功后
            handleSuccess1 (res, file) {
				var scparam={
					PICURL:res[0].FILE_PATH
				}
				this.params.listsc.push(scparam);
            },
			handleView1 (index) {
				var listsc={...this.params.listsc};
				this.imgurl=listsc[index].PICURL;
			    this.visible = true;
			},
			handleRemove1 (index) {
				var listsc={...this.params.listsc};
			    this.params.listsc.splice(index, 1); 
			},
			//<!------------------------诗词内容图片end------------------>
			
			
			
			
			//<!------------------------诗词封面start------------------>
			//上传成功后
			handleSuccess2 (res, file) {
				this.params.fm=res[0].FILE_PATH;
			},
			handleView2() {
				var fm=this.params.fm;
				this.imgurl=fm;
			    this.visible = true;
			},
			handleRemove2() {
				this.params.fm="";
			},
			//<!------------------------诗词封面end------------------>
			
			
			
			//<!------------------------诗词语音start------------------>
			//上传成功后
			handleRemove3(index) {
				var listyy={...this.params.listyy};
				this.params.listyy.splice(index, 1); 
			},
			scyysave(datas){
				const param={...datas};
				this.params.listyy.push(param);
				this.$refs.addscyy.modal0=false;
			},
			//<!------------------------诗词语音end------------------>

			
			//上传失败提示
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '文件上传失败',
                    desc: '文件' + file.name + '无法上传, 上传文件请选择jpg or png.'
                });
            },
			//上传文件的大小
            handleMaxSize (file) {
                this.$Notice.warning({
                    title: '提示',
                    desc: '文件  ' + file.name + ' 太大, 上传的文件不能超过2M.'
                });
            },
            
            openaddscyy(){
				this.$refs.addscyy.modal0=true;
			},
		},
		mounted() {
			this.editor = new E(this.$refs.editor)
			this.editor.customConfig.onchange = (html) => { // 获取内容
			 this.pcontent=html;
			}
			 // 自定义菜单配置
			this.editor.customConfig.menus = [
				  'undo',  // 撤销
				  'redo'  // 重复
			 ];
			this.editor.create();
		},
		watch:{
			modal0(news,olds){
				if(!news){
					 this.resetpar();
				}else{
					this.resetpar();
					this.params={...this.teas};
					this.editor.txt.html(this.params.pcontent); // 设置内容	
				}
			}
		},
		computed: {
		
		},
		components: {
			addscyy
		},
	}
</script>

<style scoped="scoped">
	.scyy_upload {
		background: #fff;
		border: 1px dashed #dcdee2;
		border-radius: 4px;
		text-align: center;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: border-color .2s ease;
		width: 80px;
		height:80px;
		line-height: 80px;
		text-align: center;
		cursor: pointer;
	}
	.scyy_upload:hover{
		border: 1px dashed #2d8cf0;
	}
</style>



